<template>
    <div class="content-container">
        <el-form :inline="true">
            <el-form-item label="关键字">
                <el-input v-model="keyword" placeholder="请输入姓名/电话"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select :data="departments" v-model="selectDepartment">
                    <el-option
                            v-for="(dkey, idx) in departments"
                            :label="dkey"
                            :value="idx-1"
                            :key="idx-1">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="市场专员">
                <el-select v-model="selectSellerID" clearable>
                    <el-option
                            v-for="mkt in mktLists"
                            :label="mkt.name"
                            :value="mkt.id"
                            :key="mkt.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="queryEmployeeData()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="employees" border>
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="displayGender" label="性别"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="tel" label="电话"></el-table-column>
            <el-table-column prop="qq" label="QQ"></el-table-column>
            <el-table-column prop="job.title" label="职业"></el-table-column>
            <el-table-column prop="source.title" label="来源"></el-table-column>
            <el-table-column label="市场专员" prop="seller.name"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">{{departments[scope.row.status + 1]}}</template>
            </el-table-column>
        </el-table>
        <div class="content-footer">
            <el-pagination
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    background
                    :page-size="pageSize"
                    :page-sizes="[5, 10, 50, 100]"
                    :total="total"
                    layout="sizes,prev,pager,next,total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {getCustomersApi, getMarketEmployeesApi} from "@/request/api";

    export default {
        name: "CustomerLists",
        data() {
            return {
                keyword: '',
                selectDepartment: -1,
                selectSellerID: null,
                departments: ['全部', '潜在客户', '正式客户', '资源池客户', '失败客户', '流失客户'],
                mktLists: [],
                employees: [],
                pageSize: 10,
                currentPage: 1,
                selectEIds: [],
                total: 0
            }
        },
        computed: {},
        methods: {
            // 请求员工列表
            queryEmployeeData() {
                getCustomersApi({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    keyword: this.keyword,
                    status: this.selectDepartment,
                    sellerId: this.selectSellerID
                }).then(res => {
                    if (res.success === true) {
                        this.employees = res.data.list
                        this.total = res.data.total
                    }
                })
            },
            sizeChange(val) {
                this.pageSize = val
                this.queryEmployeeData()
            },
            currentChange(val) {
                this.currentPage = val
                this.queryEmployeeData()
            }
        },
        created() {
            // 请求部门列表
            getMarketEmployeesApi({
            }).then(res => {
                if (res.success === true) {
                    this.mktLists = res.data
                }
            })
            this.queryEmployeeData()
        }
    }
</script>

<style scoped>

</style>